<template>
  <div>
    <el-card>
      <!-- 搜索 -->
      <el-form :inline="true">
        <el-form-item>
          <el-input
            placeholder="请输入用户名"
            v-model="username"
            @change="getInfo"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="getInfo"
            ></el-button>
          </el-input>
        </el-form-item>
        <!-- 添加 -->
        <el-form-item>
          <el-button type="primary" @click="addShow = true">添加</el-button>
        </el-form-item>
      </el-form>
      <!-- 添加 -->
      <el-dialog title="添加" :visible.sync="addShow">
        <el-form>
          <el-form-item label="用户名" label-width="120px">
            <el-input v-model="User.username"></el-input>
          </el-form-item>
          <el-form-item label="密码" label-width="120px">
            <el-input v-model="User.password"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" label-width="120px">
            <el-input v-model="User.email"></el-input>
          </el-form-item>
          <el-form-item label="电话" label-width="120px">
            <el-input v-model="User.mobile"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="addShow = false">取 消</el-button>
          <el-button type="primary" @click="addInfo">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 列表 -->
      <el-table :data="list" style="width: 100%" border>
        <el-table-column prop="id" label="ID" width="60px"> </el-table-column>
        <el-table-column prop="username" label="姓名"> </el-table-column>
        <el-table-column prop="email" label="邮箱"> </el-table-column>
        <el-table-column prop="mobile" label="手机"> </el-table-column>
        <el-table-column prop="role_name" label="角色"> </el-table-column>
        <el-table-column label="状态" width="100px">
          <!-- 状态 -->
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.mg_state"
              active-color="#13ce66"
              inactive-color="#999999"
              @change="upchange(scope.row.id, scope.row.mg_state)"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <!-- 修改 -->
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-edit"
              @click="edit(scope.row)"
            ></el-button>
            <!-- 删除 -->
            <el-button
              size="mini"
              type="danger"
              @click="del(scope.row.id)"
              icon="el-icon-delete"
            ></el-button>
            <el-button
              size="mini"
              type="success"
              icon="el-icon-s-tools"
              @click="Changes(scope.row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        @size-change="changeSize"
        @current-change="changeNum"
        :page-sizes="[4, 8]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
      <!-- 修改 -->
      <el-dialog title="添加" :visible.sync="editShow">
        <el-form>
          <el-form-item label="用户名" label-width="120px">
            <el-input v-model="Users.username"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" label-width="120px">
            <el-input v-model="Users.email"></el-input>
          </el-form-item>
          <el-form-item label="电话" label-width="120px">
            <el-input v-model="Users.mobile"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="editShow = false">取 消</el-button>
          <el-button type="primary" @click="UpdateSure">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 修改权限 -->
      <el-dialog title="修改权限" :visible.sync="changeInfo">
        <el-form :model="changes">
          <el-form-item label="当前用户名">
            <el-input v-model="changes.username" disabled></el-input>
          </el-form-item>
          <el-form-item label="当前角色">
            <el-input v-model="changes.name" disabled></el-input>
          </el-form-item>
          <el-form-item label="请选择角色">
            <el-select v-model="role_id" placeholder="请选择角色">
              <el-option
                :value="item.id"
                :label="item.roleName"
                v-for="(item, index) in roles_list"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="changeInfo = false">取 消</el-button>
          <el-button type="primary" @click="EditPlay(changes.id)"
            >确 定</el-button
          >
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>
<script>
// 用户列表
import { user } from "@/axios/https";
// 用户删除
import { user_del } from "@/axios/https";
// 用户添加
import { user_add } from "@/axios/https";
// 用户状态
import { user_status } from "@/axios/https";
// 用户修改
import { user_edit } from "@/axios/https";
// 用户设置权限
import { user_rightInfo } from "@/axios/https";
// 用户设置权限修改
import { user_rightEdit } from "@/axios/https";
export default {
  name: "",
  components: {},
  props: [],
  data() {
    return {
      username: "",
      pagenum: 1,
      pagesize: 4,
      total: 0,
      list: [],
      //   添加
      addShow: false,
      User: {
        username: "",
        password: "",
        email: "",
        mobile: "",
      },
      //   修改
      editShow: false,
      Users: {
        username: "",
        email: "",
        mobile: "",
        id: "",
      },
      //   修改权限
      changeInfo: false,
      changes: {
        username: "",
        id: "",
        role_name: "",
        name: "",
      },
      roles_list: [],
      role_id: "",
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.getInfo();
  },
  methods: {
    //   获取列表信息
    async getInfo() {
      const { data: res } = await user(
        `/users?query=${this.username}&pagenum=${this.pagenum}&pagesize=${this.pagesize}`
      );
      if (res.meta.status !== 200) return;
      this.list = res.data.users;
      this.total = res.data.total;
    },
    // 添加
    async addInfo() {
      const { data: res } = await user_add(this.User);
      console.log(res);
      if (res.meta.status !== 201) return;
      this.$message.success(res.meta.msg);
      console.log(111);
      this.addShow = false;
      this.User.username = this.User.password = this.User.email = this.User.mobile =
        "";
      this.getInfo();
    },
    // 分页
    changeSize(val) {
      //   console.log(val);
      this.pagesize = val;
      this.getInfo();
    },
    changeNum(val) {
      this.pagenum = val;
      //   console.log(val)
      this.getInfo();
    },
    // 删除
    async del(id) {
      let user = "/users/" + id;
      const {data:res} = await user_del(user, "delete");
      if (res.meta.status !== 200) return this.$message.error(res.meta.msg);
      this.$message.success(res.meta.msg);
      this.getInfo();
    },
    // 修改
    edit(data) {
      this.editShow = true;
      this.Users.username = data.username;
      this.Users.email = data.email;
      this.Users.mobile = data.mobile;
      this.Users.id = data.id;
    },
    async UpdateSure() {
      const { data: res } = await user_edit(
        "/users/" + this.Users.id,
        this.Users
      );
      if (res.meta.status !== 200) return;
      this.$message.success(res.meta.msg);
      this.editShow = false;
      this.getInfo();
    },
    // 修改状态
    async upchange(id, status) {
      const { data: res } = await user_status(`/users/${id}/state/${status}`);
      if (res.meta.status !== 200) return;
      this.$message.success(res.meta.msg);
    },
    // 分配权限
    async Changes(data) {
      this.changeInfo = true;
      // console.log(data);
      this.changes.username = data.username;
      this.changes.name = data.role_name;
      this.changes.id = data.id;
      const { data: res } = await user_rightInfo();
      console.log(res)
      if (res.meta.status !== 200) return;
      this.roles_list = res.data;
    },
    async EditPlay(id) {
      const {data:res} = await user_rightEdit(`/users/${id}/role/`,{rid:this.role_id,});
      console.log(this.role_id)
      if(res.meta.status !== 200) return
      this.$message.success(res.meta.msg);
      this.changeInfo = false;
    },
  },
};
</script>
<style scoped>
</style>